/* Base Typography */
:root {
  --primary-color: #2563eb;       /* Modern blue for accents */
  --secondary-color: #4f46e5;     /* Indigo for gradients */
  --text-color: #1e293b;          /* Dark slate for readability */
  --light-bg: #f8fafc;            /* Light background variant */
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Modern system font stack */
  color: var(--text-color);
  line-height: 1.6;
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    width: 100%;
  }
  
/* Ensure all elements stay within viewport */
.container {
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Extra protection for images */
img {
  max-width: 100%;
  height: auto;
}

/* Article Layout */
.article-container {
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Headings & Titles */
.article-title {
  font-size: 2.5rem;
  letter-spacing: -0.025em;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1.5rem;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  height: 1em;
  width: 0.5rem;
  background: var(--primary-color);
  border-radius: 0.25rem;
}

/* Content Enhancements */
.lead {
  font-size: 1.25rem;
  color: #64748b;
  border-left: 4px solid var(--primary-color);
  padding-left: 1.5rem;
}

/* Interactive Elements */
.list-enhanced {
  background: var(--light-bg);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.list-enhanced li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.75rem;
}

.list-enhanced li::before {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: 900;
}

/* Gradient headings */
.gradient-heading {
  background: linear-gradient(45deg, #2563eb, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Tech cards */
.tech-card {
  border: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.05);
}

/* Case study blocks */
.case-study {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15);
}

.highlight-box {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .gradient-heading {
    font-size: 2rem;
  }
  .tech-card {
    padding: 1.5rem;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .article-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
}